<!--
 * @Author: wanlixin
 * @Date: 2019-10-04 12:04:03
 * @LastEditors: sylvanas
 * @LastEditTime: 2019-11-14 19:56:20
 * @Description: 
 -->
<template>
  <grimm-page type="navbar-view" title="NavBar">
    <div slot="content">
      <h1 class="example-page-title">样式一</h1>
      <grimm-navbar :options="options1" @onBack="handleBack1" class="grimm-navbar">
        <div slot="navBarLeftBtn" class="left-btn">
          <i class="iconfont left"></i>返回
        </div>
      </grimm-navbar>
      <h1 class="example-page-title">样式二</h1>
      <grimm-navbar :options="options2" @onBack="handleBack2" class="grimm-navbar"></grimm-navbar>
    </div>
  </grimm-page>
</template>
<script>
import GrimmPage from 'example/components/GrimmPage.vue';
export default {
  name: 'NavBar',
  components: { GrimmPage },
  data() {
    return {
      options1: {
        bgColor: '#fff',
        textColor: '#333',
        transitonName: 'v',
        title: '标题1标题1标题1标题1标题1标题1标题1标题1',
        subtitle: '副标题1副标题1副标题1副标题1副标题1副标题1副标题1副标题1',
        operateBtns: [
          {
            type: 'icon',
            text: 'more',
            onClick: () => {
              this.$createToast({
                time: 1500,
                txt: '点击了【分享】按钮',
              }).show();
            },
          },
        ],
      },
      options2: {
        bgColor: '#fff',
        textColor: '#333',
        transitonName: 'v',
        title: '标题2',
        operateBtns: [
          {
            type: 'text',
            color: '#1989fa',
            text: '按钮',
            onClick: () => {
              this.$createToast({
                time: 1500,
                txt: '点击了按钮',
              }).show();
            },
          },
        ],
      },
    };
  },
  methods: {
    handleBack1() {
      this.$createToast({
        time: 1500,
        txt: '点击了返回1按钮',
      }).show();
    },
    handleBack2() {
      this.$createToast({
        time: 1500,
        txt: '点击了返回2按钮',
      }).show();
    },
  },
};
</script>
<style lang="stylus" >
.navbar-view{
  .left-btn{
    font-size: 14px;
    color: #1989fa;
    .left{
      margin: 0 5px;
    }
  }
  .grimm-navbar {
    margin-bottom: 40px;
    .operate-icon.arrow-down{
      font-size: 12px;
    }
  }
}

</style>